<template>
  <div class="goodslist">
    <!-- 条件/状态 -->
    <div class="searchWarp">
      <w-orderSearch :search-btns="searchBtns" @on-changeBtns="onSearchStatus"></w-orderSearch>
      <div class="searchInfoWarp clearfix">
        <!-- 查询条件 -->
        <div class="o">
          <span class="title">商家名称</span>
          <div class="input dis-block">
            <w-input holder="请填写" v-model="params.company"></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">商家机构号</span>
          <div class="input dis-block">
            <w-input holder="请填写" v-model="params.institutionNum"></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">手机号码</span>
          <div class="input dis-block">
            <w-input holder="请填写" v-model="params.contactPhone"></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">商品名称</span>
          <div class="input dis-block">
            <w-input holder="请填写" v-model="params.goodsName"></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">商品货号</span>
          <div class="input dis-block">
            <w-input holder="请填写" v-model="params.goodsSerial"></w-input>
          </div>
        </div>
      </div>
      <!-- 点击查询按钮 -->
      <div class="search-btn">
        <w-button @on-click="fetchGoodsListSearch">查询</w-button>
        <w-button type="option" style="margin-left: 30px" :disabled="!goodsStatusList.recordList || goodsStatusList.recordList.length == 0" @on-click="onExportGoodsList">导出EXCEL</w-button>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <div class="operations clearfix">
      <div class="fl checkedWarp">
        <w-checkbox label="pageAll" v-model="pageAll" @on-change="onSelectedStorePage">
          <span>本页全选</span>
        </w-checkbox>
        <w-checkbox :label="1" v-model="checkAll" @on-change="onSelectedAll">
          <span class="all">全部</span>
        </w-checkbox>
          
      </div>
      <div class="btns-group fl">
        <w-button-group>
          <w-button v-if="params.goodsStatus == 1" @on-click="onStoreUnder('-4', '')">上架</w-button>
          <w-button v-if="params.goodsStatus == 0" @on-click="onStoreUnder('1', '')">下架</w-button>
          <!-- <w-button @on-click="onGoodsDelete(params.goodsStatus)">删除</w-button> -->
          <w-button v-if="params.goodsStatus == -4" @on-click="_reviewAll">批量审核</w-button>
        </w-button-group>
      </div>
    </div>
    <div class="clearfix">
      <w-table :columns="columns"></w-table>
      <!-- 搜索结果列表 -->
      <div v-if="goodsStatusList.recordList && goodsStatusList.recordList.length > 0">
        <div class="goods-list" v-for="(store, storeIndex) in goodsStatusList.recordList" :key="storeIndex">
          <!-- 列表 -->
          <div class="table-list">
            <!-- 商家信息 -->
            <div class="tab-title">
              <!-- <div class="checkbox">
                <w-checkbox :label="`goods/${storeIndex}`" v-model="store.storeChecked" @on-change="_setStoreToAllCheck"></w-checkbox>
              </div> -->
              <div>
                <span>商家机构号：{{store.institutionNum}}</span>
                <span>商家名称：{{store.company}}</span>
              </div>
            </div>
            <!-- 该商家下的所有商品 -->
            <table class="table">
              <tr>
                <td>
                  <div class="checkbox">
                    <w-checkbox :label="`goods/${storeIndex}`" v-model="store.storeChecked" @on-change="_setStoreToAllCheck"></w-checkbox>
                  </div>
                </td>
                <td>
                  <div class="goods-info clearfix">
                    <!-- 
                      缺货图标: :class="{'out-stock': store.supplyMode == '1'}"
                     -->
                    <div class="goods-img fl">
                      <img v-lazy="store.goodsMainPhotoPath" alt="">
                    </div>
                    <div class="goods-name fl">
                      <p class="p-line-hide list-c">{{store.goodsName}}</p>
                      <span>货号：{{store.goodsSerial}}</span>
                    </div>
                  </div>
                </td>
                <td>
                  <span class="list-c">{{store.contactPhone}}</span>
                </td>
                <td>
                  <span class="list-c">{{store.goodsInventory || 0}}</span>
                </td>
                <td>
                  <span class="list-c">{{store.supplyMode | supplyMode}}</span>
                </td>
                <!-- 价格 -->
                <td>
                  <div>
                    <div class="list-c">{{store.tierdPrice | goodsPrice}}</div>
                    <div>（出厂价：¥{{(store.factoryPrice || 0) | currency}}）</div>
                  </div>
                </td>
                <!-- 发货方 -->
                <td>
                  <span class="list-c">{{store.consignor | consignor}}</span>
                </td>
                <!-- 商品二维码生成,有二维码则不展示"二维码",只展示二维码图片 -->
                <td>
                  <div class="m-code" v-if="store.qrCodePath">
                    <img v-lazy="`${store.qrCodePath}`" alt="">
                  </div>
                  <span class="t-under" v-else @click="onGoodsQRCode(store.id)">生成</span>
                </td>
                <!-- 操作 -->
                <td>
                  <!-- <div class="t-under" v-if="params.goodsStatus != 0" @click="onEditGoods(store.id, store.storeId)">编辑产品</div> -->
                  <div class="t-under" @click="onPeviewGoods(store.id)">预览产品</div>
                  <div class="t-under" v-if="params.goodsStatus == -4" @click="onGoodsReviewShow(store.id)">审核商品</div>
                  <div class="t-under" v-if="params.goodsStatus == 0" @click="onStoreUnder('1', store.id)">下架</div>
                  <div class="t-under" v-if="params.goodsStatus == 1" @click="onStoreUnder('-4', store.id)">上架</div>
                  <div class="t-under c-main" v-if="params.goodsStatus == -5" @click="onGoodsReviewFail(store.refuseCause)">查看不通过原因</div>
                </td>
              </tr>
            </table>
          </div> 

          <!-- 分页 -->
          <div class="fr" v-if="goodsStatusList.pageCount > 1">
            <w-paging :current="goodsStatusList.currentPage" :total="goodsStatusList.pageCount" @on-page="onChangePage"></w-paging>
          </div>
        </div>
      </div>
      <div class="goods-list" v-else>
        <div class="empty">暂无该状态下的商品信息！</div>
      </div>
    </div>

    <!-- 审核商品操作 -->
    <w-panel-fixed-wrap v-model="goodsReview" :panel-title="showTitle" title="审核商品" @on-confirm="onGoodsReview" @on-cancel="onCancel">
      <div class="m-goods-panel">
        <div>
          <span class="title">审核结果：</span>
          <div class="option">
            <w-radio class="radio" name="review" :label="0" v-model="goodsReviewParams.goodsStatus">通过</w-radio>
            <w-radio class="radio" name="review" :label="-5" v-model="goodsReviewParams.goodsStatus">不通过</w-radio>
          </div>
        </div>
        <!-- 审核不通过时，展示原因 -->
        <div v-if="goodsReviewParams.goodsStatus == -5">
          <span class="title">原因：</span>
          <div class="option textarea">
            <w-input type="textarea" v-model="goodsReviewParams.refuseCause"></w-input>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 查看审核不通过原因 -->
    <w-panel-fixed-wrap :show-btns="false" :show-close="goodsReviewFail" v-model="goodsReviewFail" :panel-title="showTitle" title="查看" :width="`${400}px`" :height="`${300}px`" @on-confirm="goodsReviewFail = false">
      <div class="m-goods-panel">
        <p>{{refuseCause}}</p>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import orderSearch from '../orderMange/components/orderSearch'
import { apiGoodsMange } from 'js/api'
import { mapGetters } from 'vuex'
import { FONT_GOODS_DETAIL_URL, API } from 'js/const'
import { joinQueryParamsToUrl } from 'js/util'

export default {
  components: {
    'w-orderSearch': orderSearch
  },
  data() {
    return {
      // 商品状态 
      searchBtns: [
        {
          title: '待审核',
          status: -4
        },
        {
          title: '出售中商品',
          status: 0
        }
        // {
        //   title: '仓库中商品',
        //   status: 1
        // },
        // {
        //   title: '草稿箱',
        //   status: -6
        // },
        // {
        //   title: '审核不通过商品',
        //   status: -5
        // }
      ],
      columns: [
        { title: '', width: '2%' },
        { title: '货品', width: '28%' },
        { title: '手机号', width: '10%' },
        { title: '库存', width: '8%' },
        { title: '供货方式', width: '8%' },
        { title: '价格', width: '15%' },
        { title: '发货方', width: '8%' },
        { title: '二维码', width: '10%' },
        { title: '操作', width: '10%' }
      ],
      showTitle: true,
      goodsReview: false, // 商品审核弹框
      goodsReviewFail: false, // 商品审核不通过弹框
      pageAll: false, // 本页全选
      checkAll: false, // 全部选中
      // 商品列表--搜素条件 
      params: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10,
        goodsStatus: -4, // 商品状态
        company: '',
        institutionNum: '',
        contactPhone: '',
        goodsName: '',
        goodsSerial: ''
      },
      goodsStatusList: {}, // 商品列表
      // 商品审核--参数 
      goodsReviewParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: [],
        goodsStatus: 0,
        refuseCause: '',
        type: 'common' // 普通商品审核
      },
      refuseCause: '' // 审核不通过原因
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.fetchGoodsList()
  },
  methods: {
    /**
     * 搜索，重置当前页
     */
    fetchGoodsListSearch() {
      this.params.currentPage = 1
      this.fetchGoodsList()
    },
    /**
     * 获取/搜素所有商品列表
     */
    fetchGoodsList() {
      this.params.accessToken = this.token
      apiGoodsMange.apiGetCGoodsLis(this.params).then(data => {
        this.goodsStatusList = data.data
        if (this.goodsStatusList.recordList == 0 || !this.goodsStatusList.recordList) return
        this.goodsStatusList.recordList.forEach(list => {
          this.$set(list, 'storeChecked', this.checkAll)
        })
      })
    },
    /**
     * 获取当前的商品状态下所有的商品，重置参数
     */
    onSearchStatus(status) {
      this.pageAll = false
      this.checkAll = false
      this.params.currentPage = 1
      this.params.goodsStatus = status
      this.params.company = ''
      this.params.institutionNum = ''
      this.params.contactPhone = ''
      this.params.goodsName = ''
      this.params.goodsSerial = ''
      this.fetchGoodsList()
    },
    /**
     * 本页全选
     */
    onSelectedStorePage() {
      // 如果商品列表不存在，则直接抛出
      if (this.goodsStatusList.length == 0) {
        return
      }

      // 将当前的商品列表的选中状态和页码的全选按钮一致
      this.goodsStatusList.recordList.forEach((v) => {
        v.storeChecked = this.pageAll
      })

      // 如果当前是全部商品全选的，则将本页全选选中
      if (!this.pageAll) {
        this.checkAll = false
      }
    },
    /**
     * 全选切换
     */
    onSelectedAll(checked) {
      if (checked) {
        this.pageAll = true
        this.goodsStatusList.recordList.forEach(list => {
          list.storeChecked = true
        })
      } else {
        this.pageAll = false
        this.goodsStatusList.recordList.forEach(list => {
          list.storeChecked = false
        })
      }
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      this.pageAll = false
      const storeList = this.goodsStatusList.recordList
      let aStore = storeList.filter(item => {
        return item.storeChecked === true
      })
      if (aStore.length === storeList.length) {
        this.checkAll = true
        this.pageAll = true
      } else {
        this.checkAll = false
        this.pageAll = false
      }
    },
    /**
     * 商品的上架与下架操作
     */
    onStoreUnder(type, id) {
      // 商品上架、下架操作
      const goodsStockParams = {
        accessToken: this.token,
        threeMenuCode: this.$route.query.three || '',
        goodsStatus: type,
        ids: [] // 商品id
      }
      if (id) {
        goodsStockParams.ids.push(id)
      } else {
        this.goodsStatusList.recordList.forEach(list => {
          if (this.checkAll) {
            goodsStockParams.ids = []
          } else if (list.storeChecked) {
            goodsStockParams.ids.push(list.id)
          }
        })
        if (goodsStockParams.ids.length == 0 && !this.checkAll) {
          this.$toast('请选择操作商品')
          return
        }
      }
      apiGoodsMange.apiGoodsStore(goodsStockParams).then(data => {
        const tip = type == '-4' ? '上架成功！' : '下架成功！'
        this.pageAll = false
        this.checkAll = false
        this.$toast(tip, () => {
          this.fetchGoodsList()
        })
      })
    },
    /**
     * 商品删除操作
     */
    onGoodsDelete(status) {
      let _this = this
      const params = {
        accessToken: this.token,
        threeMenuCode: this.$route.query.three || '',
        ids: [],
        goodsStatus: status
      }
      this.goodsStatusList.recordList.forEach(list => {
        if (this.checkAll) {
          params.ids = []
        } else {
          if (list.storeChecked) {
            params.ids.push(list.id)
          }
        }
      })
      if (params.ids.length == 0 && !this.checkAll) {
        this.$toast('请选择操作商品')
        return
      }
      // 删除提示框
      this.$modal({
        title: '提示',
        content: '确认删除？',
        onConfirm() {
          apiGoodsMange.apiGoodsDelete(params).then(data => {
            _this.$toast('删除成功', () => {
              _this.fetchGoodsList()
              _this.pageAll = false
              _this.checkAll = false
            })
          })
        }
      })
    },
    /**
     * 商品生成二维码
     */
    onGoodsQRCode(goodsId) {
      const goodsIdArr = []
      goodsIdArr.push(goodsId)
      apiGoodsMange.apiGoodsQRcode(goodsIdArr).then(data => {
        this.fetchGoodsList()
      })
    },
    /**
     * 商品编辑
     */
    onEditGoods(goodsId, storeId) {
      // 草稿箱--编辑
      this.$router.push(`addInfo?three=${this.$route.query.three}&sketchid=${goodsId}&suid=${storeId}`)
    },
    /**
     * 预览
     */
    onPeviewGoods(goodsId) {
      window.open(`${FONT_GOODS_DETAIL_URL}${goodsId}`)
    },
    /**
     * 展示商品审核弹框
     */
    onGoodsReviewShow(goodsId) {
      this.goodsReviewParams.ids = []
      this.goodsReview = true
      this.goodsReviewParams.ids.push(goodsId)
    },
    /**
     * 批量审核
     */
    _reviewAll() {
      this.goodsReviewParams.ids = []
      if (this.goodsStatusList.recordList.length ==0 || !this.goodsStatusList.recordList) return
      this.goodsStatusList.recordList.forEach(list => {
        if (this.checkAll) {
          this.goodsReviewParams.ids = []
        } else if (list.storeChecked) {
          this.goodsReviewParams.ids.push(list.id)
        }
      })
      if (this.goodsReviewParams.ids.length == 0 && !this.checkAll) return // 未选中店铺时，不操作
      this.goodsReview = true
    },
    /**
     * 商品审核操作
     */
    onGoodsReview() {
      this.goodsReviewParams.accessToken = this.token
      if (this.goodsReviewParams.goodsStatus == '0') {
        this.goodsReviewParams.refuseCause = null
      }
      apiGoodsMange.apiGoodsReview(this.goodsReviewParams).then(data => {
        this.$toast('商品审核成功！', () => {
          this.goodsReviewParams.refuseCause = null
          this.goodsReview = false
          this.checkAll = false
          this.pageAll = false
          this.fetchGoodsList()
        })
      })
    },
    /**
     * 审核不通过原因
     */
    onGoodsReviewFail(cause) {
      this.goodsReviewFail = true
      this.refuseCause = cause
    },
    /**
     * 取消弹出框时，清空数据
     */
    onCancel() {
      if (this.goodsReviewParams.goodsStatus == '-5') {
        this.goodsReviewParams.goodsStatus = '0'
        this.goodsReviewParams.refuseCause = ''
      }
    },
    /**
    * 分页
     */
    onChangePage(page) {
      if (this.checkAll) {
        this.pageAll = true
      } else {
        this.checkAll = false
        this.pageAll = false
      }
      this.params.currentPage = page
      this.fetchGoodsList()
    },
    /**
     * 商品导出
     */
    onExportGoodsList() {
      const params = {
        accessToken: this.token,
        goodsStatus: this.params.goodsStatus,
        company: this.params.company,
        institutionNum: this.params.institutionNum,
        contactPhone: this.params.contactPhone,
        goodsName: this.params.goodsName,
        goodsSerial: this.params.goodsSerial,
        type: '0' // 普通商品
      }
      apiGoodsMange.apiGoodsExport(params).then(resp => {
        window.location.href = joinQueryParamsToUrl(`${API}goods/Goods/export`, params)
      })
    }
  }
}
</script>

<style lang="scss">
.goodslist {
  .search-btn {
    .btn {
      width: 140px;
      font-size: 12px;
    }
  }
  .m-goods-panel {
    textarea {
      height: 100px;
    }
  }
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
.list-c {
  color: #313131
}
.empty {
  margin: auto;
  text-align: center;
  padding: 30px;
}
.o {
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline-block;
  .title {
    width: 80px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin: 48px auto 20px;
    text-align: center;
  }
}
.t-under {
  text-decoration: underline;
  font-size: 12px;
  color: #3693FF;
  cursor: pointer;
  line-height: 20px;
}
.goodslist{
  .search-btn {
    margin: 42px auto 20px;
    text-align: center;
  }
  .operations{
    .btns-group{
      .btn{
        width: 70px;
        height: 28px;
        background-color: #fff;
        color: #323232;
        font-size: 12px;
        border: 1px solid #9E9E9E;
        margin-right: 20px;
      }
    }
  }
  .clearfix:after{
    content: "";
    height: 0;
    display: block;
    clear: both;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  .searchWarp{
    padding-bottom: 20px;
    .searchInfoWarp{
      padding: 30px 0 0 15px;
      .rows{
        margin: 0px 50px 30px 0;
        span{
          display: inline-block;
        }
        div{
          display: inline-block;
        }
      }
    }
  }
  .line{
    border: 1px solid #D7D7D7;
  }
  .operations{
    padding: 20px 0 10px;
    .checkedWarp{
      padding: 5px 15px 0 0;
    }
    .all{
      font-size: 14px;
      color:rgba(49,49,49,1);
      font-weight: bold;
      padding: 0 10px;
    }
  }
}
.table-list {
  margin-bottom: 20px;
  table {
    td {
      border-right: 1px solid #e0e0e0;
    }
  }
  .tab-title {
    width: 100%;
    height:40px; 
    background:rgba(242,242,242,1);
    font-size: 12px;
    color: #313131;
    font-weight: 600;
    line-height: 40px;
    padding-left: 10px;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    margin-top: 20px;
    position: relative;
    span {
      &:first-child {
        margin-left: 35px
      }
      &:last-child {
        margin-left: 20px;
      }
    }
    .checkbox {
      display: inline-block;
      position: absolute;
      top: -10px;
    }
  }
  .goods-info {
    padding: 10px;
  }
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
    position: relative;
  }
  .goods-name {
    display: inline-block;
    position: relative;
    height: 88px;
    width: 60%;
    span {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  td {
    &:nth-child(1) {
      width: 2%;
      border-right: none
    }
    &:nth-child(2) {
      width: 28%;
    }
    &:nth-child(3) {
      width: 10%;
    }
    &:nth-child(4) {
      width: 8%;
    }
    &:nth-child(5) {
      width: 8%;
    }
    &:nth-child(6) {
      width: 15%;
      span {
        line-height: 24px;
        &:last-child {
          color: #606060
        }
      }
    }
    &:nth-child(7) {
      width: 8%;
    }
    &:nth-child(8) {
      width: 10%;
      .m-code {
        width: 80px;
        height: 80px;
        border: 1px solid #999;
        text-align: center;
        margin: auto;
      }
    }
    &:nth-child(9) {
      width: 10%;
    }
  }
}
.m-goods-panel {
  & > div {
    margin-bottom: 10px;
  }
  .title {
    display: inline-block;
    width: 80px;
    text-align: right;
    vertical-align: top;
    font-size: 12px;
  }
  .radio {
    margin-right: 20px;
  }
  .option {
    display: inline-block;
    font-size: 12px;
  }
  .textarea {
    width: 400px;
  }
}
</style>

